<html manifest="IGNORE.manifest" lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!DOCTYPE html>
<html manifest="IGNORE.manifest" lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"
          th:href="@{${uiPath} + ${appName} + '/css/reset.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css"
          th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"
          th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>

    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"
          th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>
</head>
<body>
<form id="commentForm" th:action="@{'/materialGoods/pindanSave'}" method="post">

<div id="tianjiasp" class="azong">

        <div class="gtoubu">
            <p class="shpingunli">设置拼单</p>
            <a><img class="fanhui" src="../images/raw_1503386635.png" alt=""
                    th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
        </div>

        <div class="kuaiw"></div>

        <p class="baikuai"></p>
        <div class="xqfive">
            <div class="checkbox">

                <div class="shifouzhankai">
                    <ul class="tianxieme">
                        <li class="tanxiexinxi">
                            <p class="pinpric">拼团人数：</p>
                            <p class="tisfxing">为了成功率，建议人数为3</p>
                            <div class="hullistdian">
                                <select id="pinren" class="shulselecity" name="pinNums">
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </li>
                        <!-- <li class="tanxiexinxi">
                          <p class="pinpric">拼团单价：</p>
                          <input class="pintuansuru" placeholder=" 每天只能在9:00之前修改一次，请填最低价" type="text">
                        </li> -->
                        <li class="tanxiexinxi">
                            <p class="pinpric">拼团周期：</p>
                            <p class="tisfxing">最大周期为7天</p>
                            <form class="hullistdian">
                                <select id="pintime" class="shulselecity" name="pinTime" >
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                </select>
                            </form>
                        </li>
                        <li class="tanxiexinxi fkkljok">
                            <div id="pinpeisongfei" class="biaogexuaz feiigopeisong" action="" method="get">是否免费配送：
                                <label class="xuazetued"><input class="yeschect" type="radio" name="pinFreeSend" value="0"
                                                                checked/><span></span>是</label>
                                <label class="xuazetued"><input class="yeschect" type="radio" value="1"
                                                                name="pinFreeSend"    /><span></span>否</label>
                            </div>

                            <p class="xqnf">每公里配送费：</p>
                            <input class="xqnsf shufuekfk" type="text" value="" name="pinSendPrice" placeholder=" 请输入每公里配送费">
                            <p class="xqnf shaongpoin">商品必须送货入户</p>
                        </li>
                        <li class="tanxiexinxi mianfeianz">
                            <div class="xuancehangye">
                                <form id="pinanzhuangfei" class="biaogexuaz" action="" method="get">是否免费安装：
                                    <label class="xuazetued"><input class="yeschect" type="radio" name="pinHasInstall" value="0"
                                                                    onclick="pinanzhuangclick()" checked/><span></span>是</label>
                                    <label class="xuazetued"><input class="yeschect" type="radio" name="pinHasInstall" value="1" onclick="pinanzhuangclick()"/><span></span>否</label>
                                </form>
                            </div>
                            <p class="pinpric">安装费：</p>
                            <input class="pintuansuru pinanzhuanf" placeholder=" 请输入安装费" name="pinInstallPrice" type="text">
                        </li>
                    </ul>
                    <div class="xinghaocuxnz">
                        <p class="xuanzcdhai">选择型号</p>
                        <div class="xuanzwxinghao">

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <div class="bcuocunxiugai">
            <p class="tiajiagoods" onclick="saveGoods()">添加</p>
        </div>


</div>
<div class="xuanzvhai">
    <div class="xuanzetishi">
        <p class="tishiyukn xibaiof" id="xhselect">请选择型号</p>
        <div class="xinghaohuizong">

            <div th:each="models,modelStat: ${result}" th:id="${models.modelId}" th:onclick="'tanchuyinclick('+${models.modelId}+')'">
                <p th:id="${models.modelId}+'modelName'" class='xqxinghaox' th:text="${models.modelName}"></p>
                <p th:id="${models.modelId}+'size'"class='xqxinghaox' th:text="${models.size}"></p>
                <p th:id="${models.modelId}+'color'"  class='xqxinghaox' th:text="${models.color}"></p>
                <p th:id="${models.modelId}+'price'"  class='xqxinghaox' th:text="${models.price}"></p>
            </div>

        </div>
    </div>

</div>
<div class="pindandanjia">
    <div class="xuanzetishi">
        <p class="tishiyukn xibaiof">请填写拼单价格</p>
        <div class="pindanxinhao"></div>
        <input class="shuruguig pindanjiage" type="text" id="pdJg" placeholder="请输入商品拼单价格(单位元)" style="margin-left: 0.5rem">
        <input class="shuruguig pindanjiage" type="hidden" id='modelId' placeholder="请输入商品拼单价格(单位元)" style="margin-left: 0.5rem">

        <div class="queingq toakd" style="clear: both;">
            <p class="pindanqu">取消</p>
            <p class="pindanjiat">添加</p>
        </div>
    </div>
</div>
</div>
</form>
<script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
<script type="text/javascript" src="../js/jquery.min.js"
        th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>

<!-- <script type="text/javascript" src="../js/basevalue.js" ></script> -->
<script type="text/javascript" src="../js/webuploader.min.js"
        th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>
<!-- <script type="text/javascript" src="../js/cropbox.js" ></script> -->
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>

<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>
<!--  <script type="text/javascript" src="../js/CLSManger.js"></script> -->
<script th:inline="javascript">
    var inpts = 0;
    $('.xuanzcdhai').click(function () {
        $('.xuanzvhai').show();
    })
    function tanchuyinclick(id){
        $("#modelId").val(id);
        $('.xuanzvhai').hide();
        $('.pindandanjia').show();
    }
    $('.pindanjiat').click(function () {

        var pdPrice=$('#pdJg').val();
        var modelId=$("#modelId").val();
        var modelName=$('#'+modelId+'modelName').text();
        var size=$('#'+modelId+'size').text();
        var color=$('#'+modelId+'color').text();
        var price=$('#'+modelId+'price').text();
        var divv = $('<div id="pj'+inpts+'" class="baoxinghao"></div>');
		var span = "<p id='modelName"+modelId+"' class='xqxinghaox'>"+modelName+"</p>"+"<p id='size"+modelId+"'  class='xqxinghaox'>"+size+"</p>"+"<p id='color"+modelId+"'  class='xqxinghaox'>"+color+"</p>"+"<p id='pdPrice"+modelId+"'  class='xqxinghaox'>"+pdPrice+"</p>";
		var p = "<p id='dexfdh"+inpts+"' class='addtu7' onclick='delete_system1("+inpts+")'></p>";
        var input = "<input id='modelNameinput" + inpts + "' type='hidden' name='list[" + inpts + "].modelId' value='" + modelId + "'>"+"<input id='jiagecinput" + inpts + "' type='hidden' name='list[" + inpts + "].pinPrice' value='" + pdPrice + "'>";
        divv.append(span);
        divv.append(input);
		$('.xuanzwxinghao').append(divv);
		$('.xuanzwxinghao').append(p);
        $('#pdJg').val('');
        $("#modelId").val('');
        inpts++
        $('.pindandanjia').hide();

    })
    	function delete_system1(q){
   	//根元素不删除
       document.getElementById("pj" + q + "").remove();
  	   document.getElementById("dexfdh" + q + "").remove();
  	   inpts--
   	}
   	function saveGoods() {
        $.ajax({
            type: 'post',
            url: $('#commentForm').attr('action'),
            data: $('#commentForm').serialize(),
            dataType: 'json',
            beforeSend: function () {
                if ($('#pinren').val() == '') {
                    alert("请选择拼单人数");
                    $.DialogByZ.Close();

                    return false;
                }
                if ($('#pintime').val() == '') {
                    alert("请输入拼单周期");
                    $.DialogByZ.Close();
                    return false;
                }
                if ($("input[name='pinFreeSend']:checked").val() == '1') {
                    if ($('#pinSendPrice').val() == '') {
                        alert("请输入每公里配送费用");
                        $.DialogByZ.Close();
                        return false;
                    }
                }
                if ($("input[name='pinHasInstall']:checked").val() == '1') {
                    if ($('#pinInstallPrice').val() == '') {
                        alert("请输入安装费用");
                        $.DialogByZ.Close();
                        return false;
                    }
                }
                if ($("div").text() == '') {
                        alert("请选择型号");
                        $.DialogByZ.Close();
                        return false;
                }
            },

            success: function (result) {
                if (result.code == 1) {
                    $.DialogByZ.Close();
                   $.DialogByZ.Alert({Title: "提交成功", Content: result.data, BtnL: "确定", FunL: localhref()})


                } else {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content: result.data, BtnL: "确定"})
                }
            }

        })

    }
    function localhref() {
        window.location.href = "/materialGoods/index"

    }
 </script>

</body>
</html>